<template>
	<view class="detail-ap">
		<view class="tabList">
			<v-tabs v-model="tabCurrent" :scroll="false" :tabs="tabList" @change="tabChange" ></v-tabs>
		</view>
		<view class="main">
			<view class="mian-title" :style="{'height': detailList.isClosed==0 ?'196rpx':'96rpx'}">
				<view class="xq_title">
					运输企业申请
				</view>
				<view class="xq_type" v-if="detailList.isClosed==0">
					当前节点：{{nodeName}}
				</view>
				<view class="" style="padding: 36rpx;" v-if="detailList.isClosed==0">
					<steps :steps="numList" :current="1"></steps>
					<!-- <u-steps :list="numList2" :current="1" mode="dot"></u-steps> -->
				</view>
			</view>
			<swiper class="mian-content" :current="tabCurrent" style="height: 1280rpx;" @change="changesw">
				<swiper-item class="swiper-item">
					<view class="forms">
						<view class="Category_title">
							<view class="line"></view>运输单位信息
						</view>
						<view class="items">
							<view class="field">
								申请人
							</view>
							<view class="content">
								{{detailmsg.applicant || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								联系方式
							</view>
							<view class="content">
								{{detailmsg.contact || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								身份证号码
							</view>
							<view class="content">
								{{detailmsg.identityCard || '暂无' }}
							</view>
						</view>

						<view class="items">
							<view class="field">
								企业名称
							</view>
							<view class="content">
								{{detailmsg.companyName || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								统一信用代码
							</view>
							<view class="content">
								{{detailmsg.uscc || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								法人姓名
							</view>
							<view class="content">
								{{detailmsg.corporateRepresentative || '暂无' }}
							</view>
						</view>

						<view class="items">
							<view class="field">
								注册地址
							</view>
							<view class="content">
								{{detailmsg.registeredAddress || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								停车场
							</view>
							<view class="content">
								{{detailmsg.parkingId || '暂无' }}
							</view>
						</view>
						<view class="items">
							<view class="field">
								营业执照
								<view class="showpdf">
									<img class="pho" :src="detailmsg.ossBlImg" alt="">
								</view>
							</view>
						</view>

						<view class="items">
							<view class="field">
								道路运营经营许可证
								<view class="showpdf">
									<img class="pho" :src="detailmsg.businessPermits" alt="">
								</view>
							</view>
						</view>
						<!-- 车辆信息 -->
						<view class="Category_title">
							<view class="line"></view>车辆信息
						</view>
						<!-- <view class="cards" @click="gotocards(item)" v-for="item in "  > -->
						<view class="cards" @click="gotocards(item)"
							v-for="item in detailmsg.odsZhatuZtbCarBaseInfoRequestQueries">
							<view class="itemsc">
								<view class="fieldc">
									车牌号
								</view>
								<view class="contentc">
									{{item.plateNumber || '浙A111111'}}
								</view>
							</view>
							<view class="itemsc" v-for="man in item.zhatuDriverInfoRequestQueries">
								<view class="fieldc">
									驾驶员
								</view>
								<view class="contentc">
									{{man.name || '张三'}}
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<circullog v-if="tabCurrent==1" :ids="idd" :nodeName='nodeName'></circullog>
				</swiper-item>
			</swiper>
		</view>
		<u-popup v-model="show" mode="bottom " :border-radius="border_radius" mask>
			<view class="pop">
				<view class="title">
					<view class="" @click="show=false">
						取消
					</view>
					<view class="">
						{{outorder==1 ? '不通过' :outorder== 2? '退单整改': '审核' }}
					</view>
					<view v-if="buttontype==11" style="color: #007AFF;" @click="allocateout">
						确认
					</view>
					<view v-else style="color: #007AFF;" @click="comfirm">
						确认
					</view>
				</view>
				<view class="" style="margin:50rpx 20rpx 50rpx 20rpx ">
					<u-input v-if="outorder== 2" :enableNative="false" style="" v-model="type_value" :type="type"
						:maxlength="500" :border="border" :height="height" placeholder="请输入退单整改意见" />
					<u-input v-else-if="outorder== 1" :enableNative="false" style="" v-model="type_value" :type="type"
						:maxlength="500" :border="border" :height="height" placeholder="请输入不通过意见" />
					<u-input v-else :enableNative="false" style="" v-model="type_value" :type="type" :border="border"
						:maxlength="500" :height="height" placeholder="请输入审核意见" />
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showpart" mode="bottom " :border-radius="border_radius" mask>
			<view class="pop">
				<view class="title">
					<view class="" @click="showpart=false">
						取消
					</view>
					<!-- <view class="">
						{{buttontype==10 ? '请选择参与部门' :'分派处置' }}
					</view> -->
					<view class="" style="color: #007AFF;" @click="comfirm_part">
						确认
					</view>
				</view>
				<view class="checkbox-group" v-if="buttontype==10">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list"
							shape="circle" size="45rpx" :key="index" :name="item.orgId">{{item.orgName}}</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="" style="margin:50rpx 20rpx 50rpx 20rpx " v-else>
					<u-input style="" v-model="type_value" :type="type" :border="border" :height="height"
						placeholder="请填写审核意见" />
				</view>

			</view>
		</u-popup>

		<u-toast ref="uToast" />
		<view class="footer">
			<view class="" v-show="cricul==0">
				<button class="taketask" v-if="orderType == 0" type="default" @click="taketask">任务认领</button>
				<view class="footer" v-else>
					<!-- 1.是否通过 -->
					<view class="footer" v-if="buttontype==1">
						<button class="cancel" type="default" @click="passout">关闭工单</button>
						<button class="confim" type="default" @click="forward()">转发</button>
						<button class="confim" type="default" @click="passin">通过</button>
					</view>
					<view class="footer" v-else-if="buttontype==3">
						<button class="cancel" type="default" @click="passout">关闭工单</button>
						<button class="confim" type="default" @click="forward()">转发</button>
						<button class="confim" type="default" @click="show=true">通过</button>
					</view>
					<view class="footer" v-else-if="buttontype==10">
						<button class="cancel" type="default" @click="passout">关闭工单</button>
						<button class="confim" type="default" @click="forward()">转发</button>
						<button class="confim" type="default" @click="showpart=true">分派部门</button>
					</view>
					<view class="footer" v-else-if="buttontype==11">
						<button class="heyan" type="default" @click="canceltake">取消认领</button>
						<button class="heyan" type="default" @click="passout(1)">不通过</button>
						<button class="heyan" type="default" @click="passout(2)">退单整改</button>
						<button class="heyan" type="default" @click="comfirm_part">通过</button>
					</view>
				</view>
			</view>
		</view>
		<appoint-task :recordId="id" :personShow="personShow" @appointTaskSuccess="appointTaskSuccess"
			@appointTaskCancel="appointTaskCancel"></appoint-task>
		<view class="">
			<u-calendar v-model="showcalendar" :mode="mode" @change='setTime'></u-calendar>
		</view>

	</view>
</template>

<script>
	import {
		getOrderDetail,
		getWorkOrderLogs,
		getTakeTask,
		postOrderHandle,
		orgByNodeId,
		allocate,
		allocatedo,
		getPdf,
		detailById,
		postWithdraw,
		postOrderAudit,
		getTransferDepartment,
		getNextPersons,
		postOrderDispatch,
		postCheck,
		getMyList
	} from '@/pages/api/orderp/orderp.js'
	import {
		getByOrdersId
	} from '@/pages/api/report/orderp.js'
	import {
		uploadUrl
	} from '@/pages/api/report/helperOrderp.js'
	import methodMix from '@/pages/index/approval/qiye/methodMix_qy.js'
	import circullog from '@/pages/index/approval/circulLog/index'
	import steps from '@/components/orderStep/orderStep.vue'
	import appointTask from '@/components/appointTask/index.vue'
	export default {
		mixins: [methodMix],
		components: {
			circullog,
			steps,
			appointTask
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				id: '',
				detailList: {},
				timeLeft: '',
				formarr: [],
				personShow: false, //转发人员弹窗
				getphotolist: [],
				chuzhiphotolist: [],
				circulList: [],
				types: ['新建', '核验', '处置', '审核', '转派', '上提', '关闭工单', '关闭'],
				orderColor: ["#418AEC", "#00B853", "#FF9F00", "#F55545", "#00D0CE", "#418AEC", "#8941EC"],
				chuzhiarr: [],
				show: false,
				showpart: false,
				showmap: false,
				closeable: false,
				type: 'textarea',
				autoup: false,
				border: true,
				height: 240,
				type_value: '',
				border_radius: '30rpx',
				orderType: '',
				nodeId: '',
				list: [{
						nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
						orgId: "GO_df2f46315d414518a31bea909fbd67a6",
						orgName: '建设局',
						checked: true,
						disabled: false
					},
					{
						nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
						orgId: "GO_df2f46315d414518a31bea909fbd67a6",
						orgName: '水利局',
						checked: false,
						disabled: false
					},
					{
						nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
						orgId: "GO_df2f46315d414518a31bea909fbd67a6",
						orgName: '交通局',
						checked: false,
						disabled: false
					},
					{
						nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
						orgId: "GO_df2f46315d414518a31bea909fbd67a6",
						orgName: '农业农村局',
						checked: false,
						disabled: false
					},
					{
						nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
						orgId: "GO_df2f46315d414518a31bea909fbd67a6",
						orgName: '高新区建设局',
						checked: false,
						disabled: false
					}
				],
				activelist: [],
				flag: false,
				idd: '',
				buttontype: 0,
				list_1: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中

				outorder: 0,
				detailmsg: {

				},
				checkop: '',
				markers: [{
						iconPath: require("@/static/end.png"),
						id: 0,
						latitude: 39.989643,
						longitude: 116.481028,
						width: 23,
						height: 33,
					},
					{
						iconPath: require("@/static/start.png"),
						id: 0,
						latitude: 39.90816,
						longitude: 116.434446,
						width: 24,
						height: 34,
					},
				],
				polyline: [],
				polygon: [],
				points: [],
				action: 'http://172.21.188.5:8085/zhatu/file/upload',
				form: {
					chukou: [],
					chongxi: [],
					fangchen: [],
					dibang: [],
					shipin: [],
					qita: []
				},
				date: currentDate,
				date1: currentDate,
				showendTime: false,
				showstartTime: false,
				time: '2021-08-01',
				time1: '2021-08-01',
				showcalendar: false,
				mode: 'range',
				tabList: [ '审核详情','审核历史'],
				tabCurrent: 0,
				nodeName: '',
				cricul: '',
				numList: [{
					name: '提交申请'
				}, {
					name: '部门审核'
				}],
			}
		},
		onLoad(op) {
			this.id = op.id
			this.nodeId = op.nodeId
			this.flag = op.flag
			this.idd = op.idd
			this.checkop = op.checkop
			this.nodeName = op.nodeName
			this.cricul = op.currenttab
			console.log('iddddd', this.idd)
		},
		mounted() {

			this.getolddetail()
			this.getdetail()
			// this.getorgByNodeId()

		},
		onBackPress(event) {
			// console.log(event)
			uni.redirectTo({
				url: '/pages/index/approval/index'
			})
		},
		methods: {
			tabChange(index) {
				this.tabCurrent = index
			},
			setTime(e) {
				console.log(e)
				this.time = e.startYear + '-' + e.startMonth + '-' + e.startDay
				this.time1 = e.endYear + '-' + e.endMonth + '-' + e.endDay
			},
			//增加点位
			addmarker(e) {
				console.log(e)
				this.markers.push({
					iconPath: require("@/static/end.png"),
					id: 0,
					latitude: e.latitude,
					longitude: e.longitude,
					width: 23,
					height: 33,
				})
				this.points.push({
					longitude: e.longitude,
					latitude: e.latitude,
				})
				// this.polygon=[]
				this.polygon.push({
					points: this.points,
					color: "#000000DD",
					strokeWidth: 6,
					strokeColor: "#000000DD",
					fillColor: '#000000DD'
				})

			},
			onchange(e) {
				const value = e.detail.value
				console.log(value)
			},
			onnodeclick(node) {
				console.log(node)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.detail-ap {
		height: 100vh;
		width: 750rpx;
		display: flex;
		flex-direction: column;

		.main {
			flex: 1;
			width: 750rpx;
			background-color: #F2F3F5;
			overflow-x: hidden;
			display: flex;
			flex-direction: column;

			.mian-title {
				margin-top: 80rpx;
				padding: 32rpx;
				height: 196rpx;
				background-color: #FFFFFF;

				.xq_title {
					font-weight: 600;
					font-size: 40rpx;
					color: #363A44;
					margin-bottom: 24rpx;
				}

				.xq_type {
					font-size: 28rpx;
					color: #B5B7BA;
				}
			}

			.mian-content {
				flex: 1;
				height: 1rpx;
				overflow: hidden;
				overflow-y: auto;

				.swiper-item {
					overflow: hidden;
					overflow-y: auto;
				}
			}

			.forms {
				// margin-top: 22rpx;
				padding: 26rpx 32rpx 26rpx 0rpx;
				width: 750rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;

				.Category_title {
					display: flex;
					font-weight: 600;
					font-size: 32rpx;
					color: #428FFC;
					height: 92rpx;
					background-color: #F6F7F8;
					line-height: 100rpx;
					padding-left: 32rpx;

					.line {
						height: 32rpx;
						margin: 32rpx 16rpx 0 0;
						width: 4rpx;
						background-color: #428FFC;
					}
				}

				.items {
					display: flex;
					padding: 26rpx 0 26rpx 0;
					font-size: 32rpx;
					margin-left: 32rpx;
					margin-right: 32rpx;
					border-bottom: 2rpx solid #E8E9EC;

					.field {
						width: 242rpx;
						color: #B3B5B9;
						margin-right: 32rpx;

						.showpdf {
							margin-top: 16rpx;
							height: 200rpx;
							width: 200rpx;
							border: 1rpx solid #E8E9EC;
							border-radius: 10rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							.pho {
								height: 200rpx;
								width: 200rpx;
							}

							.pdf {

								height: 128rpx;
								width: 104rpx;
							}
						}
					}

					.content {
						width: 440rpx;
						color: #B3B5B9;
						// color: #363A44;
					}
				}

				.line {
					height: 5rpx;
					background-color: #F2F3F5;
				}
			}

			.circul {
				display: flex;
				margin-left: 22rpx;
				margin-bottom: 40rpx;
				width: 750rpx;

				.type {
					margin-top: 22rpx;
					height: 50rpx;
					width: 50rpx;
					background-color: #2979FF;
					color: #FFFFFF;
					font-size: 31rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 50rpx;
				}

				.circul_content {
					padding: 22rpx;
					margin-left: 22rpx;
					background-color: #FFFFFF;
					width: 588rpx;
					border-radius: 10rpx;

					.circul_field {
						margin-top: 22rpx;
					}
				}
			}
		}

		.cards {
			margin: 26rpx;
			height: 188rpx;
			width: 686rpx;
			background-color: #FFFFFF;
			border-left: 8rpx solid #428FFC;
			border-top-left-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
			box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);

			.itemsc {
				display: flex;
				font-size: 32rpx;
				padding: 32rpx 0 0 32rpx;

				.fieldc {
					width: 212rpx;
					color: #B5B7BA;
				}

				.contentc {
					word-wrap: break-word;
					width: 400rpx;
					color: #3E424B;
				}
			}
		}

		.footer {
			display: flex;
			justify-content: center;

			width: 750rpx;
			height: 128rpx;
			background-color: #FFFFFF;
			font-size: 29rpx;
			box-shadow: 2rpx 0 6rpx rgba(0, 0, 0, .12), 0 0 6rpx rgba(0, 0, 0, .04);

			.heyan {
				height: 87rpx;
				width: 120rpx;
				border: 1rpx solid #428FFC;
				border-radius: 20rpx;
				font-size: 25rpx;
				color: #FFFFFF;
				background-color: #428FFC;
				margin-top: 14rpx;
				// margin-right: 5rpx;
				margin-left: 12rpx;
			}

			.cancel {
				height: 87rpx;
				width: 339rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				color: #428FFC;
				margin-top: 14rpx;
				// margin-left: 32rpx;
			}

			.confim {
				height: 87rpx;
				width: 339rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				background-color: #428FFC;
				color: #FFFFFF;
				margin-top: 14rpx;
				margin-left: 16rpx;
			}

			.taketask {
				height: 87rpx;
				width: 692rpx;
				line-height: 87rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				background-color: #428FFC;
				color: #FFFFFF;
				margin-top: 14rpx;
			}
		}
	}

	.pop {
		height: 750rpx;
		border-radius: 20rpx;

		.pop_title {
			color: #363A44;
			font-size: 32rpx;
			padding: 40rpx 0 32rpx 32rpx;
			border-bottom: 1rpx solid #EFEFEF;
		}

		.title {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.checkbox-group {
			padding: 20rpx;
		}
	}

	#navi_map {
		height: 550rpx;
	}

	.map_box {
		height: 550rpx;
	}

	img {
		height: 116rpx;
		width: 116rpx;
		margin-right: 20rpx;
	}

	.tabList {
		height: 80rpx;
		width: 750rpx;
		z-index: 99;
		position: fixed;
		top: 0rpx;
		background-color: #FFFFFF;
		border-bottom: .5rpx solid #DBDBDB;
	}
</style>
